<template>
  <div class="JobDetails">
    <NavBar
      fixed
      placeholder
      :title="info.icoNo"
      z-index="999"
      @click-right="onClickRight"
      ref="nav"
    >
      <template #left>
        <Icon
          name="arrow-left"
          size="0.53rem"
          color="#000"
          @click="
            $router.push({
              path: 'JobDetails',
              query: $route.query,
            })
          "
        />
      </template>
    </NavBar>
    <div class="main">
      <Field
        v-if="'dcuId' in info"
        v-model="info.dcuNam"
        label="施工单位"
        placeholder="请选择施工单位"
        input-align="right"
        is-link
        readonly
        required
        @click="$router.push({ path: 'SelectUnit', query: info })"
      ></Field>
      <Field
        v-if="'dcuId' in info"
        v-model="info.dcuConsRespon"
        label="施工负责人"
        placeholder="请输入施工负责人"
        input-align="right"
        readonly
      ></Field>
      <Field
        v-if="'dcuId' in info"
        v-model="info.dcuConsTel"
        label="施工单位联系方式"
        placeholder="请输入施工单位联系方式"
        input-align="right"
        readonly
      ></Field>
      <Field
        v-if="'workUser' in info"
        v-model="info.workUser"
        label="作业人员"
        placeholder="请输入作业人员"
        input-align="right"
        required
      ></Field>
      <Field
        v-if="'custodian' in info"
        v-model="info.custodian"
        label="作业监护人"
        placeholder="请输入作业监护人"
        input-align="right"
        required
      ></Field>
      <Field
        v-if="'consCustodian' in info"
        v-model="info.consCustodian"
        label="施工单位监管人"
        placeholder="请输入施工单位监管人"
        input-align="right"
        required
      ></Field>
      <!-- 未确定项 -->
      <Field
        v-if="info.icoNo == '动土作业' && info.icoNo != '涉水作业'"
        v-model="info.risk"
        label="风险分析"
        placeholder=""
        input-align="right"
      ></Field>
      <Field
        v-else-if="info.icoNo !== '断路作业' && info.icoNo != '涉水作业'"
        label="风险分析"
        placeholder=""
        input-align="right"
        is-link
        readonly
        @click="$router.push({ path: 'RiskAnalysis', query: info })"
      ></Field>
      <textarea
        v-if="['动土作业', '涉水作业', '断路作业'].indexOf(info.icoNo) < 0"
        placeholder="风险分析"
        cols="30"
        rows="10"
        readonly
        v-model="info.riskName"
      ></textarea>

      <Field
        v-if="'riskAnaly' in info"
        label="风险与措施"
        placeholder=""
        input-align="right"
        is-link
        readonly
        required
        @click="$router.push({ path: 'RisksAndMeasures', query: info })"
      ></Field>
      <textarea
        v-if="'riskAnaly' in info"
        placeholder="风险与措施"
        cols="30"
        rows="10"
        v-model="info.riskAnalyName"
      ></textarea>

      <Field
        v-if="info.icoNo == '动火作业'"
        label="动火方式"
        placeholder="请选择动火方式"
        input-align="right"
        is-link
        readonly
        required
        @click="toSafetyConfirmation"
      ></Field>
      <textarea
        v-if="info.icoNo == '动火作业'"
        placeholder="动火方式"
        cols="30"
        rows="10"
        v-model="info.wayName"
        readonly
      ></textarea>
      <Field
        v-if="'safe' in info"
        label="安全措施确认"
        placeholder="请选择安全措施确认"
        input-align="right"
        is-link
        readonly
        required
        @click="
          $router.push({ path: 'ConfirmationOfSafetyMeasures', query: info })
        "
      ></Field>
      <textarea
        v-if="'safe' in info"
        placeholder="安全措施确认"
        cols="30"
        rows="10"
        v-model="info.safeName"
        readonly
      ></textarea>

      <Field
        v-if="'applyUnit' in info"
        label="断路申请单位补充的安全措施补充"
        placeholder=""
        input-align="right"
        readonly
        required
      ></Field>
      <textarea
        v-if="'applyUnit' in info"
        v-model="info.content"
        placeholder="断路申请单位补充的安全措施补充"
        cols="30"
        rows="10"
      ></textarea>
      <Field
        v-if="'applyUnit' in info"
        label="断路作业单位补充的安全措施补充"
        placeholder=""
        input-align="right"
        readonly
        required
      ></Field>
      <textarea
        v-if="'workUnit' in info"
        v-model="info.content"
        placeholder="断路作业单位补充的安全措施补充"
        cols="30"
        rows="10"
      ></textarea>
      <Field label="施工方案" :border="false" readonly></Field>
      <Uploader
        class="uploader"
        v-model="info.constPlan"
        multiple
        :max-count="2"
      />
      <Field label="人员资质" :border="false" readonly></Field>
      <Uploader
        class="uploader"
        v-model="info.personInte"
        multiple
        :max-count="2"
      />
      <Field label="施工单位资质" :border="false" readonly></Field>
      <Uploader
        class="uploader"
        v-model="info.constUnit"
        multiple
        :max-count="2"
      />
      <Field label="安全交底书" :border="false" readonly></Field>
      <Uploader
        class="uploader"
        v-model="info.measures"
        multiple
        :max-count="2"
      />
      <Field label="其他" :border="false" readonly></Field>
      <Uploader class="uploader" v-model="info.other" multiple :max-count="2" />
    </div>
    <div class="btnFa">
      <Button class="btn" @click="onSumbit">提交</Button>
    </div>
  </div>
</template>

<script>
import {
  EquipmentRepairServicePost,
  JobSubmission,
} from "../../../api/work.js";
import Layout from "components/Layout";
import uploadImages from "@/utils/uploadImages1.js";
import {
  Popup,
  Picker,
  NavBar,
  Icon,
  Field,
  Cell,
  Uploader,
  Button,
  DatetimePicker,
  Toast,
} from "vant";
export default {
  name: "JobDetails",

  components: {
    Popup,
    Picker,
    Uploader,
    Layout,
    NavBar,
    Icon,
    Field,
    Cell,
    Button,
    DatetimePicker,
    Toast,
  },

  directives: {},

  data() {
    return {
      info: {},
    };
  },

  mounted() {
    // console.log(this.$route.query.codeA);
    // console.log(this.$route.query);
    // let info = JSON.parse(this.$route.query.info);
    // console.log("info", info);
    // this.info = JSON.parse(this.$route.query.info);
    this.info = {
      ...this.$route.query,
      constPlan: [],
      personInte: [],
      constUnit: [],
      measures: [],
      other: [],
    };
  },
  // activated() {
  //   // console.log(this.$route.query);
  //   this.info = this.$route.query;
  // },

  methods: {
    async onSumbit() {
      if ("dcuId" in this.info && this.info.dcuId.trim().length <= 0)
        return Toast.fail("请选择施工单位");
      if ("workUser" in this.info && this.info.workUser.trim().length <= 0)
        return Toast.fail("请输入作业人员");
      if ("custodian" in this.info && this.info.custodian.trim().length <= 0)
        return Toast.fail("请输入作业监护人");
      if (
        "consCustodian" in this.info &&
        this.info.consCustodian.trim().length <= 0
      )
        return Toast.fail("请输入施工单位监管人");
      if ("riskAnaly" in this.info && this.info.riskAnaly.trim().length <= 0)
        return Toast.fail("请选择风险与措施");
      if ("riskAnaly" in this.info && this.info.riskAnaly.trim().length <= 0)
        return Toast.fail("请选择风险与措施");
      if ("wayName" in this.info && this.info.wayName.trim().length <= 0)
        return Toast.fail("请选择动火方式");
      if ("safe" in this.info && this.info.safe.trim().length <= 0)
        return Toast.fail("请选择安全措施确认");

      if (this.info.constPlan.length <= 0)
        return Toast.fail("请拍摄施工方案照片");

      if (this.info.personInte.length <= 0)
        return Toast.fail("请拍摄人员资质照片");
      if (this.info.constUnit.length <= 0)
        return Toast.fail("请拍摄施工单位资质照片");
      if (this.info.measures.length <= 0)
        return Toast.fail("请拍摄安全交底书照片");

      // return console.log(this.info);
      try {
        let pic1 = await uploadImages(this.info.constPlan);
        this.info.constPlan = pic1.join(",");
        let pic2 = await uploadImages(this.info.personInte);
        this.info.personInte = pic2.join(",");
        let pic3 = await uploadImages(this.info.constUnit);
        this.info.constUnit = pic3.join(",");
        let pic4 = await uploadImages(this.info.measures);
        this.info.measures = pic4.join(",");

        if (this.info.other.length > 0) {
          let pic5 = await uploadImages(this.info.other);
          this.info.other = pic5.join(",");
        }

        await JobSubmission({
          orgNo: localStorage.getItem("orgNo"),
          ...this.info,
        });
        this.$router.push({
          path: "WorkRecord",
          query: {
            icoNo: this.info.icoNo,
            dgwkName: this.info.dgwkName,
          },
        });
      } catch (err) {
        Toast.fail("提交失败");
      }
    },
    toSafetyConfirmation() {
      this.$router.push({
        path: "SafetyConfirmation",
        query: this.info,
      });
    },
    onConfirm(value, index) {
      console.log(value, index);
      this.lv = value;
      this.show1 = false;
    },
    onCancel() {},
    startConfirm(value) {
      console.log(this.getTime(value));
      this.startTime = this.getTime(value);
      this.minDate1 = value;
      this.show2 = false;
    },
    endConfirm(value) {
      console.log(this.getTime(value));
      this.endTime = this.getTime(value);
      this.maxDate = value;
      this.show3 = false;
    },
    getTime(time) {
      const year = time.getFullYear();
      const Month = time.getMonth() + 1;
      const Date = time.getDate();
      return `${year}-${Month}-${Date}`;
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/style/var.less";
.JobDetails {
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  background-color: #f7f7f9;
  padding: 30px 0;
  // /deep/.van-nav-bar__content {
  //   background-color: #3982f6;

  //   .van-nav-bar__title {
  //     color: #fff;
  //   }
  // }
  .main {
    padding-bottom: 150px;
    background-color: #fff;
    .search-icon {
      color: #3982f6;
      margin-top: 8px;
      margin-left: 8px;
    }
    .t {
      font-size: 28px;
      margin: 10px;
      margin-left: 28px;
    }
    textarea {
      width: 692px;
      height: 157px;
      margin: 10px 0;
      margin-left: 50%;
      padding: 15px;
      transform: translate(-50%);
      border: 1px solid #dddddd;
      font-size: 26px;
      border-radius: 6px;
    }
    /deep/.van-cell__title span {
      color: black;
    }
    .location-box {
      width: 100%;
      display: flex;
      align-items: center;
      div {
        font-size: 28px;
        color: #999999;
      }
    }
    .van-uploader {
      margin-left: 20px;
    }
  }
  .btnFa {
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding-bottom: 10px;
  }
  .btn {
    height: 98px;
    width: 90%;
    background: #fff;
    border-radius: 6px;
    font-weight: 500;
    color: @primary;
    border: 1px solid @primary;
    font-size: 36px;
  }
  .time {
    /deep/.van-picker {
      height: 100%;
      .van-picker__columns {
        margin-top: 60px;
      }
    }
  }
  /deep/ .van-cell__title,
  .van-field__label {
    width: 400px;
  }
  .van-uploader {
    margin: 20px;
  }
  /deep/.van-uploader__upload {
    border: 2px dashed #e16712;
    width: 110px;
    height: 110px;
    border-radius: 4px;
    background: #fff;
    .van-icon {
      color: rgb(225, 103, 18);
      &::before {
        content: "\F0A2";
      }
    }
  }
}
</style>